<template>
  <div class="detailPage" ref="wrap">
    <div class="headerInfo">
      <img :src="goodInfo.image_list[1]" alt="">
      <div class="text_info">
        <div class="title flex">
          <p>{{ goodInfo.name }}<span>{{ activeState  }}</span></p>
          <p>原价：￥{{ goodInfo.old_price }}</p>
        </div>
        <div class="actionMessage flex">
          <p ref="count_state">倒计时结束：{{ day }}天{{ hour }}小时{{ minute }}分{{ second }}秒</p>
          <p>活动价<b><span>￥</span><span class="number">{{ goodInfo.price }}</span></b></p>
        </div>
        <p class="wuliu">快递：{{ expressState }}</p>
      </div>
    </div>
    <p class="tabbar"><span>产品信息</span></p>
    <div class="good_content" v-html="goodInfo.detail">
    </div>
    <!-- 底部悬浮操作区 -->
    <div class="handle">
      <div class="share" @click="shareShow = true">
        <span class="iconfont icon-fenxiang"></span>
        <span>分享</span>
      </div>
      <div class="star" @click="star">
        <span class="iconfont icon-shoucang"></span>
        <span>收藏</span>
      </div>
      <input type="button" :value="good_id==='79'?'立即领取':'立即抢购'" @click="order">
    </div>
    <img src="@/assets/share.png" alt="" class="shareImg" v-show="shareShow" @click="shareShow=false">
    <div class="erweima_wrap" v-show="erweimaIsShow" @click.stop="hideErweima">
      <div>
        <img src="@/assets/erweima.jpg" alt="">
        <p>长按识别二维码，关注宏香馨公众号</p>
        <p>获取更多优惠商品信息</p>
      </div>
    </div>
    <shade v-if="shadeShow"/>
    <router-link tag="div" to="/order" class="orderDesc">
      <span class="iconfont icon-dingdan"></span>
      <span>我的订单</span>
    </router-link>
  </div>
</template>

<script>
import wx from "weixin-js-sdk";
// import 'http://res.wx.qq.com/open/js/jweixin-1.4.0.js'
import login from "@/utils/login";
import getCode from "@/utils/getCode";
import getUrlParams from "@/utils/getUrlParams.js";
import { countView, getSign } from "@/api/index";
import { getGood } from '@/api/mid-autumn';
export default {
  data () {
    return {
      goodInfo: {
        image_list: {
          '1': ''
        }
      },
      urlParams:{},
      activeState: '',
      shareShow: false,
      erweimaIsShow: false,
      day: '',
      hour: '',
      minute: '',
      second: '',
      shadeShow: true,
      good_id: this.$route.query.good_id,
      expressState: this.$route.query.good_id === '79' ? '自付' : '包邮'
    }
  },
  created() {
    login(this);
    getUrlParams(this);
    this.urlParams.pid = this.urlParams.good_id;
    this.urlParams.page_url = location.href;
    this.$store.commit("SETURLPARAMS", this.urlParams);
    getGood(this.good_id).then(result => {
      this.$store.commit("SETPAGEINFO", {
        title: result.data.name,
        description: result.data.feature
      });
      this.$store.commit("SETROOTMENUID", result.data.root_menu_id);
      this.goodInfo = result.data;
      const endTime = new Date(this.goodInfo.end_time.replace(/-/g, "/")).getTime();
      const startTime = new Date(this.goodInfo.start_time.replace(/-/g, "/")).getTime();
      const nowTime = new Date().getTime();
      if(nowTime < startTime) {
        this.activeState = '未开始'; 
        this.$refs.count_state.innerHTML = '活动未开始';
        this.shadeShow = false;
      } else {
        if(nowTime < endTime) {
          this.activeState = '进行中';
          var residue = (endTime - nowTime) / 1000;
          setInterval(()=> {
            residue--;
            this.day = Math.floor(residue / 3600 / 24) + "";
            this.hour = Math.floor((residue / 3600) % 24) + "";
            this.minute = Math.floor(residue % 3600 / 60) + '';
            this.second = Math.floor(residue % 60) + '';
            this.shadeShow = false;
          }, 1000)
        } else {
          this.activeState = '已结束';
          this.$refs.count_state.innerHTML = '活动已结束';
          this.shadeShow = false;
        }
      }
    });
    getSign(location.href.split("#")[0]).then(res => {
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: res.data.appId, // 必填，公众号的唯一标识
        timestamp: res.data.timestamp, // 必填，生成签名的时间戳
        nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
        signature: res.data.signature, // 必填，签名
        jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage", "updateAppMessageShareData"] // 必填，需要使用的JS接口列表
      });
      wx.ready(() => {
        // wx.updateAppMessageShareData({
        //   title: this.goodInfo.name, // 分享标题
        //   desc: this.goodInfo.feature, // 分享描述
        //   link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        //   imgUrl: this.goodInfo.image, // 分享图标
        // }, function (res) {
        //   console.log('?????????????')
        //   alert(4565656456)
        //   //这里是回调函数 
        //   console.log(res,45646656);
        // });
        wx.onMenuShareTimeline({
          title: this.goodInfo.name, // 分享标题
          link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: this.goodInfo.image, // 分享图标
          success: function() {
            alert('yes')
          },
          cancel: function() {
            alert('cancel')
          }
        });
        wx.onMenuShareAppMessage({
          title: this.goodInfo.name, // 分享标题
          desc: this.goodInfo.feature, // 分享描述
          link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: this.goodInfo.image, // 分享图标
          success: function() {
            alert('yes')
          },
          cancel: function() {
            alert('cancel')
          }
        });
      });
      wx.error(function(res) {
      });
    });
    countView(this.$store.state.urlParams);
  },
  mounted() {
    // const s = document.createElement('script');
    // s.type = 'text/javascript';
    // s.src = 'http://res.wx.qq.com/open/js/jweixin-1.4.0.js';
    // document.body.appendChild(s);
  },
  methods: {
    star() {
      this.erweimaIsShow = true;
      this.$refs.wrap.style.overflow = "hidden";
    },
    hideErweima() {
      this.erweimaIsShow = false;
      this.$refs.wrap.style.overflow = "visible";
    },
    order() {
      const endTime = new Date(this.goodInfo.end_time.replace(/-/g, "/")).getTime();
      const startTime = new Date(this.goodInfo.start_time.replace(/-/g, "/")).getTime();
      const nowTime = new Date().getTime();
      if(endTime < nowTime) {
        this.$messagebox.alert('本期已结束，请参与其他活动！');
        return false;
      }
      this.$router.push({
        name: '确认订单',
        params: {
          id: this.good_id,
          num: 1,
          package: this.goodInfo.package[1].name,
          price: this.goodInfo.package[1].price,
          package_id: 1,
          root_menu_id: this.goodInfo.root_menu_id
        }
      })
    }
  },
  components: {
    
  }
}
</script>

<style lang="scss" scoped>
@import '@/style/base.scss';
.detailPage {
  width: 100%;
  height: 100%;
  background-color: #fff;
  .headerInfo {
    img {
      width: 100%;
      height: to(480);
    }
    .text_info {
      padding: 0 to(15);
      p {
        font-size: to(23);
        line-height: to(50);
      }
      .title, .actionMessage {
        justify-content: space-between;
      }
      .title {
        p:nth-child(1) {
          position: relative;
          span {
            position: absolute;
            top: 0;
            right: to(-60);
            background-color: #FF0036;
            transform: scale(.6);
            height: to(32);
            line-height: to(32);
            border-radius: to(5);
            padding: to(2);
            color: white;
          }
        }
        p:nth-child(2) {
          text-decoration: line-through;
        }
      }
      .actionMessage {
        p:nth-child(2) {
          b {
            color: #FF1440;
            font-size: to(36);
            line-height: to(0);
            span {
              font-size: to(23);
              vertical-align: baseline;
            }
            .number {
              font-size: to(36);
              vertical-align: baseline;
            }
          }
        }
      }
      .wuliu {
        color: #5C5C5C;
        font-size: to(20);
      }
    }
  }
  .tabbar {
    text-align: center;
    font-size: to(30);
    color: #5F0909;
    line-height: to(64);
    background-color: #F4F4F4;
    span {
      // line-height: to(64);
      display: inline-block;
      padding: 0 to(28);
      border-bottom: 1px solid #5F0909;
      box-sizing: border-box;
    }
  }
  .good_content {
    & /deep/ p {
      margin: 0;
    }
    & /deep/ img {
      width: 100%;
      display: block;
    }
  }
  .handle {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: to(85);
    display: -webkit-flex;
    .share,
    .star {
      flex: 1;
      background-color: #fff;
      display: -webkit-flex;
      flex-direction: column;
      padding: to(8);
      .iconfont {
        color: #c63d3d;
      }
      // align-items: center;
      // justify-content: center;
      span {
        font-size: to(20);
        flex: 2;
        text-align: center;
        &.iconfont {
          flex: 3;
          font-size: to(42);
          // line-height: 100%;
        }
      }
    }
    .share {
      // @include border(1,#c8c8c8);
      border-right: 1px solid #c8c8c8;
    }
    input {
      flex: 5;
      background-color: #eb5454;
      border: 0;
      font-size: to(25);
      color: white;
      -webkit-appearance: none;
    }
  }
  .shareImg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .erweima_wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.65);
    div {
      background-color: #fff;
      width: to(500);
      height: to(620);
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      img {
        width: 100%;
      }
      p {
        font-size: to(26);
        text-align: center;
      }
    }
  }
  .orderDesc {
    position: fixed;
    right: to(-30);
    bottom: to(227);
    border: 1px solid #ccc;
    // @include border(100,#ccc);
    border-right: 0;
    border-radius: to(50) 0 0 to(50);
    padding: 0 to(50) 0 to(20);
    height: to(70);
    line-height: 0;
    background-color: #fff;
    display: -webkit-flex;
    display: flex;
    z-index: 2;
    span {
      font-size: to(25);
      line-height: to(70);
      flex: 4;
    }
    .iconfont {
      font-size: to(32);
      color: #c63d3d;
      flex: 1;
      margin-right: to(10);
    }
  }
}
 
</style>
